<template>
  <el-popover
    placement="bottom"
    :width="200"
    trigger="click"
    :disabled="itemDisabled"
    v-model:visible="visible"
  >
    <div :class="$style['org-tree']">
      <org-tree @click-node="clickNode" />
    </div>
    <template #reference>
      <el-select
        clearable
        v-model="form[item.key]"
        :placeholder="placeholder"
        :style="style"
        :disabled="itemDisabled"
        :popper-class="$style.dropdown"
      >
        <el-option :label="option.name" :value="option.id" />
      </el-select>
    </template>
  </el-popover>
</template>

<script lang="ts">
import { defineComponent, PropType, toRefs, ref, onMounted, watch } from 'vue'
import { SelectOrg } from '../types'
import usePlacehoder from '@/hooks/usePlacehoder'
import OrgTree from '@/components/OrgTree/index.vue'
import { ObjectType } from 'typings/interfaces'
import { findNode } from '@/utils/util'
// import useOrgTree from '@/hooks/useOrgTree'
import useDisabled from '../hooks/useDisabled'
import { requestOrgTree2 } from '@/api/global'
import { find, isEmpty } from 'lodash'

// import { useStore } from 'vuex'
// import { requestBdSectionAll } from '@/api/global'

export default defineComponent({
  emits: {
    'update:form': null,
  },
  components: {
    OrgTree,
  },
  props: {
    item: {
      type: Object as PropType<SelectOrg>,
      required: true,
    },
    form: {
      type: Object as PropType<Record<string, string>>,
      required: true,
    },
    placeholderId: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const placeholder = usePlacehoder(props.item, 'lang.placeholder.select')
    const { form, item, disabled } = toRefs(props)
    const itemDisabled = useDisabled(disabled.value, item.value.disabled)
    const nodeRef = ref(null)
    const option = ref<ObjectType>({})
    const rst = ref<any>('')
    const firstId = ref<string>('')
    // const { orgTree } = useOrgTree()
    // const store = useStore()
    const visible = ref<boolean>(false)

    const findOrg = async (orgId: string) => {
      rst.value = await requestOrgTree2()
      option.value = findNode(rst.value.data.data, { id: orgId })
      // function addKey(list) {
      //   for(let item of list){
      //     if (isEmpty(item.children)) {
      //       firstId.value=item.id
      //       return
      //     }else{
      //       addKey(item.children)
      //     }
      //   }
      // }

      // if(!orgId){
      //   addKey(rst.value.data.data)
      //   orgId = firstId.value
      // }

      setTimeout(() => {
        form.value[item.value.key] = option.value.id
      }, 0)
    }
    const clickNode = (data: ObjectType) => {
      if (isEmpty(data.children)) {
        visible.value = false
        findOrg(data.id)
      }
    }
    onMounted(() => {
      findOrg({ ...form.value }[item.value.key])
    })
    return {
      style: {
        width: props.item?.width ? props.item.width + 'px' : '100%',
      },
      rst,
      itemDisabled,
      nodeRef,
      option,
      clickNode,
      placeholder,
      visible,
      firstId,
    }
  },
})
</script>
<style lang="scss" module>
.org-tree {
  max-height: 300px;
  overflow: auto;
}
.dropdown {
  display: none;
  :global(.el-scrollbar) {
    .el-scrollbar {
      display: none;
    }
  }
}
</style>
